<template>
  <div class="yingmoo-membernav">
    <header class="header">
      <p @click="currIndex=1,curr=0,setcurrIndex(1)">
        <span class="header-left">
          <router-link tag="span" to="/"><img src="../assets/ym-member/home.png" /> 鹰目网首页</router-link>
          <span class="register">
            <font color="red">
              <span class="name" v-if="user.contentUser != null">Hi,<i>{{user.contentUser}}</i></span>
              <span class="name" v-else="user.contentEmail != null">Hi,<i>{{user.contentUser}}</i></span>
              <span class="name" v-else="user.contentMobile != null">Hi,<i>{{user.contentMobile}}</i></span>
            </font>
            <img src="../assets/ym-header/arrows.png" />
          </span>

          <span class="out" style="cursor: pointer;">
            <span v-if="flag" @click="confirmExit">退出</span>
            <span v-if="!flag" >
              <router-link tag="span" :class="{'router-link-exact-active': $route.name=='ymEnroll'}" to="/ymEnroll" class="enroll">免费注册</router-link>        		
            </span>
          </span>
        </span>
        <span class="member">会员中心</span>
<!--
        <router-link class="sever" tag="span" to="/ymMemberneedlist">我的需求</router-link><img src="../assets/ym-header/arrows.png" />
        <router-link class="sever" tag="span" to="/ymMemberorder">我的订单</router-link><img src="../assets/ym-header/arrows.png" />
        <router-link class="sever" tag="span" to="/ymAttentionmedia">关注中心</router-link><img src="../assets/ym-header/arrows.png" />
        <router-link class="sever" tag="span" v-if="user.shop != 0" to="/ymMemberstore">店铺管理</router-link><img src="../assets/ym-header/arrows.png" />
-->
        <span class="tel">客服热线</span>
        <span class="num">
			    <img src="../assets/ym-header/phone.png" class="tel_img" />400 650 7893</span>
      </p>
    </header>
    <div class="yingmoo-memberbanner">
      <div class="nav">
        <div class="yingmoo-logo">
          <router-link tag="div" to="/"><img src="../assets/ym-member/yingmoo-logo.png" /></router-link>
          <p>广告主中心</p>
        </div>
        <p class="account">
          <!--<span @click="curr=4,setcurr(4)">
            <router-link tag="span" to="/ymMemberaccount">账户管理
<!--              <img src="../assets/ym-member/selice.png" />
            </router-link>
          </span>
          <span @click="curr=0,setcurr(0)"><router-link tag="span" to="/yminformation">消息</router-link></span>-->
        </p>
        <div class="search">
          <input type="text" class="ipt" v-model="params.key"/>
          <div class="seek" @click="search">搜索</div>
        </div>
        <router-link tag="p" to="/ymShoppingcart" class="settle">
          <img src="../assets/ym-member/car.png" /> 购物车结算
          <img src="../assets/ym-member/right.png" />
        </router-link>
      </div>
    </div>
    <div class="membernav">
      <ul class="nav">
        <li :style='{"border-bottom":curr==1? "2px solid #1075bb" :""}' @click="curr=1,setcurr(1)"><router-link tag="li" to="/ymMemberdefault">首页</router-link></li>
        <li :style='{"border-bottom":curr==2? "2px solid #1075bb" :""}' @click="curr=2,setcurr(2)" v-if="user.shop!=0"><router-link tag="li" to="/ymMemberstore">店铺管理</router-link></li>
        <li :style='{"border-bottom":curr==3? "2px solid #1075bb" :""}' @click="curr=3,setcurr(3)"><router-link tag="li" to="/ymMemberorder">订单中心</router-link></li>
        <li :style='{"border-bottom":curr==4? "2px solid #1075bb" :""}' @click="curr=4,setcurr(4)"><router-link tag="li" to="/ymMemberaccount">账户管理</router-link></li>
        <li :style='{"border-bottom":curr==5? "2px solid #1075bb" :""}' @click="curr=5,setcurr(5)"><router-link tag="li" to="/ymMemberneedlist">需求中心</router-link></li>
        <li :style='{"border-bottom":curr==6? "2px solid #1075bb" :""}' @click="curr=6,setcurr(6)"><router-link tag="li" to="/ymAttentionmedia">关注中心</router-link></li>
        <li :style='{"border-bottom":curr==7? "2px solid #1075bb" :""}' @click="curr=7,setcurr(7)"><router-link tag="li" to="/ymMembermyerror">我的检错</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: "yingmoo-membernav",
    data() {
      return {
        user: {},
        flag: false,
        curr:1,
        params:{
					key:'',
					categoryCode:'',
					mediaArea:''
				}
      }
    },
    mounted() {
      this.getUser();
    },
    methods: {
    	search:function(){
				window.sessionStorage.setItem("params",JSON.stringify(this.params));
				window.location.href = "../#/ymList";
			},
      getUser: function() {
        var data = localStorage.getItem("user");
        if (data != null) {
          this.user = JSON.parse(localStorage.getItem("user"));
          this.flag = true;
        } else {
          this.flag = false;
        }
      },
      confirmExit: function() {
        if (confirm("您确认要退出吗？")) {
          localStorage.clear();
          window.location.href = "../#/"
          this.user = {};
          this.flag = false;
        }
      },
      setcurr:function(are){
        console.log(are)
        window.sessionStorage.removeItem('index')
        if(are==0){
          window.sessionStorage.removeItem('are')
        }else{
          window.sessionStorage.setItem('are',are)
          console.log(are)
        }
      },
      getcurr:function(){
        this.curr= window.sessionStorage.getItem('are')
        console.log(sessionStorage.getItem('are'))
      },
      setcurrIndex: function(index) {
        if(index==7){
          window.sessionStorage.removeItem('index')
         }else{
            window.sessionStorage.setItem('index', index)
            window.sessionStorage.removeItem('ear')
         }
        //        console.log(index)
      },
      getcurrIndex: function() {
        this.currIndex = window.sessionStorage.getItem('index')
        console.log(sessionStorage.getItem('index'))
      }
    }
  }

</script>

<style scoped lang="less">
  .yingmoo-membernav {
    width: 100%;
    .header {
      width: 100%;
      height: 45px;
      background-color: #e6e6e6;
      p {
        width: 1200px;
        margin: 0 auto;
        line-height: 45px;
        font-size: 14px;
        color: #666666;
        span{
          cursor: pointer;
          margin-left: 7px;
        }
        .header-left{
          display: inline-block;
          width: 327px;
          span{
            cursor: pointer;
            margin-left: 7px;
          }
          .name{
            width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            float: left;
            margin-right: 10px;
          }
          .out {
            color: #f29600;
            margin-left: 8px;
          }
          .register {
            margin-left: 40px;
          }
        }
        .member {
          margin-left: 180px;
          padding: 0 5px 1px 5px;
          width: 99px;
          height: 22px;
          background-color: #f29600;
          color: white;
        }
        img {
          padding-left: 5px;
        }
        .tel {
          margin-left: 399px;
        }
        .tel_img {
          padding-left: 5px;
          padding-right: 5px;
        }
        .num {
          font-weight: bold;
          color: #f29600;
        }
      }
    }
    .yingmoo-memberbanner {
      width: 100%;
      height: 62px;
      background-color: #036eb7;
      .nav {
        width: 1200px;
        height: 62px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .yingmoo-logo {
          width: 252px;
          height: 43px;
          display: flex;
          justify-content: space-between;
          p {
            color: #6998d4;
            font-size: 14px;
            line-height: 43px;
          }
        }
        .account {
          color: #dddddd;
          font-size: 15px;
          span {
            margin-left: 30px;
            cursor: pointer;
            img {
              margin-left: 5px;
            }
          }
        }
        .search {
          width: 300px;
          height: 32px;
          display: flex;
          .ipt {
            width: 242px;
            height: 30px;
            border: none;
            outline: none;
            font-size: 14px;
            padding-left: 10px;
          }
          .seek {
            width: 58px;
            height: 100%;
            line-height: 33px;
            text-align: center;
            background-color: #f29600;
            color: white;
            font-size: 14px;
          }

        }
        .settle {
          color: white;
          font-size: 14px;
          cursor: pointer;
        }
      }
    }
    .membernav {
      height: 46px;
      width: 100%;
      background-color: white;
      .nav {
        height: 46px;
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        line-height: 46px;
        color: #333333;
        font-size: 16px;
        text-align: center;
        li {
          width: 126px;
          height: 46px;
          cursor: pointer;
          &:hover {
            border-bottom: 2px solid #1075bb;
            box-sizing: border-box;
          }
        }
      }
      .red {
        color: red;
      }
      .sever{margin-left:5px;cursor: pointer;}
    }
  }

</style>
